<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 轮番图 */
.onecontent1{
        width:600px;
        height: 340px;
        position: relative;
        overflow: hidden;
        background-color:aquamarine;
}
.oneimgs{
    width: 3050px;
    height: 300px;
    position: absolute;
    font-size: 0;
    transition: left 0.8s;
    left: 0;
    top: 0;
}

.oneimgs a img{
    width: 600px;
    height: 300px;
}
.onetxt{
    height: 40px;
    background-color: rgba(0, 0, 0, 0.911);
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.onetxt a{
      line-height: 40px;
      flex-grow: 1;
      text-decoration: none;
      color:aliceblue;
      text-align: center;
      opacity: 0.7;
}
.onetxt .byy{
   color: #e5af27;
   background: rgba(255, 255, 255, 0.285);
}

    </style>
</head>
<body>
    <div class="onecontent1">
        <div class="oneimgs">
            <a href="" title=""><img src="/王者荣耀/img/04.jpg" alt=""></a>
            <a href="" title=""><img src="/王者荣耀/img/2.jpg" alt=""></a>
            <a href="" title=""><img src="/王者荣耀/img/03.jpg" alt=""></a>
            <a href="" title=""><img src="/王者荣耀/img/01.jpg" alt=""></a>
            <a href="" title=""><img src="/王者荣耀/img/00.jpg" alt=""></a>

        </div>
        <div class="onetxt">
            <a data-id="0" href="">峡谷中二</a>
            <a data-id="1" href="">峡谷中二</a>
            <a data-id="2" href="" class="byy">峡谷中二</a>
            <a data-id="3" href="">峡谷中二</a>
            <a data-id="4" href="">峡谷中二</a>
        </div>
    </div>
    <script>
       
    var onetxt = document.querySelector(` .onecontent1  .onetxt `);
    var onecontent1 =document.querySelector(` .onecontent1 `);
// 自动轮播下一个
    function output(){
        var oimg = document.querySelector(' .onecontent1  .onetxt a .byy');
        var index = parseInt(oimg.getAttribute('data-id'));
        var next = index == 4 ? 0 : index + 1;
        var newimg = document.querySelector(` .onecontent1 .oneimgs`);
        newimg.style.left = (-600 * next) + 'px';

        var mothess = oimg.parentElement.children;
        for (var j = 0; j < mothess.length; j++) {
            mothess[j].classList.remove('byy');
        }
        mothess[next].classList.add('byy');
    }

// 代码执行时，自作轮播
   var loop = setInterval(output, 2000);


    onetxt.onmouseover = function (e) {
        var obj = e.target;
        var index = parseInt(obj.getAttribute('data-id'));
        //    console.log(index);
        var oneimgs = document.querySelector(` .onecontent1 .oneimgs`);
        oneimgs.style.left = (-600 * index) + 'px';


        var mothes = obj.parentElement.children;
        for (var j = 0; j < mothes.length; j++) {
            mothes[j].classList.remove('byy');
        }
        obj.classList.add('byy');

        //清除定时器
        clearInterval(loop);

    }


    onecontent1.onmouseout = function () {
        // 鼠标移走后轮播图继续（重新开始）
      loop = setInterval(output,2000);
    }
    onecontent1.onmouseover=function(){
        // 鼠标移入后自动轮播停止
     clearInterval(loop);
    }
    </script>
</body>
</html>